<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,
			h1,
			h2,
			h3,
			p,
			ul,
			li,
			dl,
			dt,
			dd,
			div,
			section {
				margin: 0;
				padding: 0;
			}
			
			body {
				font-family: "微软雅黑";
				font-size: 12px;
				line-height: 28px;
			}
			
			#book {
				margin: 5px auto 0 auto;
				width: 650px;
				overflow: hidden;
			}
			
			.imgLeft {
				float: left;
				width: 210px;
			}
			
			.imgLeft img {
				width: 200px;
			}
			
			.textRight {
				float: right;
				width: 440px;
			}
			
			#book h1 {
				font-size: 16px;
				line-height: 50px;
			}
			
			.textRight dl {
				padding-left: 5em;
			}
			
			.textRight dl dd {
				display: none;
			}
			
			#jdPrice p {
				display: inline;
			}
		</style>
	</head>

	<body>
		<section id="book">
			<div class="textRight">
				<h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1>
				<p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p>
				<p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译</p>
				<div class="price">
					<div id="jdPrice">京东价： <span>￥24.10</span> [6.9折]
						<p>[定价：<span>￥35.00</span>]</p> (降价通知)</div>
					<p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p>
					<dl>
						<dt>以下促销可在购物车任选其一</dt>
						<dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>
						<dd><span>满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd>
					</dl>
					<p id="ticket">领 券：<span>105-6</span> <span>200-16</span></p>
				</div>
			</div>
		</section>
		<script src="../js/jquery-1.12.4.js"></script>
		<script type="text/javascript">
			/**
			 * Created by zongjuan.wang on 2016/6/15.
			 */

			$(document).ready(function() {
				$("dt").click(function() { //获取<dt>标签并为其添加click事件函数
					$("dd").css("display", "block"); //获取<dd>标签设置显示
				});

				$("h1").css("color", "blue"); //获取并设置<h1>字体颜色为蓝色
				/* 获取并设置所有class为price的元素背景颜色和内边距 */
				$(".price").css({
					"background": "#efefef",
					"padding": "5px"
				});
				/* 获取并设置id为author的元素字体颜色 */
				$("#author").css("color", "#083499");
				/* 获取并设置所有<dt>、<dd>、class为intro的元素字体颜色 */
				$(".intro,dt,dd").css("color", "#ff0000");
				$("*").css("font-weight", "bold"); //设置所有元素的字体加粗显示
			})
		</script>
	</body>

</html>